/*
 * @Author: tanying
 * @Date: 2024-04-16 15:16:25
 * @LastEditTime: 2024-04-16 15:16:25
 * @LastEditors: tanying
 * @FilePath: \vue-three\src\components\twin copy.js
 * @Description: 
 */
import * as THREE from "three"
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
// 引入dat.gui.js的一个类GUI
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';

const gui = new GUI();


// 定义threejs输出画布的尺寸(单位:像素px)
const width = window.innerWidth; //窗口文档显示区的宽度作为画布宽度
const height = window.innerHeight; //窗口文档显示区的高度作为画布

const scene = new THREE.Scene()
// const geometry = new THREE.BoxGeometry(100, 100, 100); 
// const material = new THREE.MeshLambertMaterial({
//   color: 0x00ffff,
// }); 
// const mesh = new THREE.Mesh(geometry, material);
// scene.add(mesh)

// 加载环境贴图
// 加载周围环境6个方向贴图
// 上下左右前后6张贴图构成一个立方体空间
// 'px.jpg', 'nx.jpg'：x轴正方向、负方向贴图  p:正positive  n:负negative
// 'py.jpg', 'ny.jpg'：y轴贴图
// 'pz.jpg', 'nz.jpg'：z轴贴图
const textureCube = new THREE.CubeTextureLoader()
  .setPath('./envMap/')
  .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
  // CubeTexture表示立方体纹理对象

scene.environment = textureCube;

// 设置一个天空盒背景图
const geometry = new THREE.SphereGeometry(400, 50, 50);
const texture = new THREE.TextureLoader().load("./kandao3.jpg");
texture.colorSpace = THREE.SRGBColorSpace;//设置为SRGB颜色空间,与webgl渲染器一致
const material = new THREE.MeshBasicMaterial({
  map: texture,
  side: THREE.BackSide, //默认正面可见，设置为背面可见即可
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);



const loader = new GLTFLoader();
loader.load( './小区.glb', function ( gltf ) {
  console.log('gltf',gltf);
  // 把gltf.scene里面模型添加到场景scene中
  scene.add( gltf.scene );
})


// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
// 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
directionalLight.position.set(80, 100, 50);
// 方向光默认指向xyz坐标原点
scene.add(directionalLight);


// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
camera.position.set(200, 200, 200);
camera.lookAt(0, 0, 0)


// 注意先执行.setSize设置好画布尺寸，再执行渲染`.render()`
const renderer = new THREE.WebGLRenderer({
  antialias: true, // 渲染器锯齿属性
})
renderer.setSize(width, height); 
renderer.setPixelRatio(window.devicePixelRatio);
// renderer.render(scene, camera);
renderer.setClearColor(0x999999);

document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);


// 渲染函数
function render() {
  renderer.render(scene, camera); //执行渲染操作
  // mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
  requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
}
render();


// onresize 事件会在窗口被调整大小时发生
window.onresize = function () {
  // 重置渲染器输出画布canvas尺寸
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 如果相机视锥体相关参数发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
  camera.updateProjectionMatrix();
};


